import { PageContainer, ProTable } from "@ant-design/pro-components";
import {
  Button,
  Modal,
  Input,
  Form,
  Popconfirm,
  Radio,
  Space,
  InputNumber,
} from "antd";
import { connect } from "umi";
import { namespace, calcColumns } from "./configFile";
import { useEffect, useRef, useState } from "react";

const Page = (props) => {
  const { dispatch, submitLoading } = props;
  const [open, setOpen] = useState(false);
  const [form] = Form.useForm();
  const actionRef = useRef();

  useEffect(() => {
    dispatch({
      type: `${namespace}/pageInit`,
    });
  }, []);

  const deleteItem = (params) => {
    dispatch({
      type: `${namespace}/deleteItem`,
      params,
      callback: () => {
        console.log(actionRef);
        actionRef.current?.reload();
      },
    });
  };

  const showDetail = (record) => {
    dispatch({
      type: `${namespace}/toggleState`,
      params: {
        id: record.id,
      },
      callback: () => {
        console.log(actionRef);
        actionRef.current?.reload();
      },
    });
    Modal.info({
      title: record.messageTitle,
      content: (
        <>
          <p>提醒时间:{record.remindTime}</p>
          <p>
            提醒内容:
            <p>{record.messageContent}</p>
          </p>
        </>
      ),
      okText: "关闭",
    });
  };

  const operate = [
    {
      title: "消息内容",
      dataIndex: "phone",
      hideInSearch: true,
      render: (_, record) => (
        <Button onClick={() => showDetail(record)} type="link">
          查看详情
        </Button>
      ),
    },
    {
      title: "操作",
      fixed: "right",
      dataIndex: "id",
      align: "center",
      hideInSearch: true,
      render: (_, record) => {
        return (
          <Popconfirm
            title="确定要删除当前项吗?"
            onConfirm={() => deleteItem({ id: record.id })}
          >
            <Button type="link" danger>
              删除
            </Button>
          </Popconfirm>
        );
      },
    },
  ];

  const toggleState = () => {
    dispatch({
      type: `${namespace}/toggleState`,
      params: {},
      callback: (res) => {
        actionRef.current?.reload();
      },
    });
  };

  return (
    <PageContainer>
      <ProTable
        search={false}
        rowKey="id"
        actionRef={actionRef}
        toolBarRender={() => [
          <Button type="link" onClick={toggleState}>
            全部标记已读
          </Button>,
          <Button
            type="link"
            onClick={() => {
              deleteItem({});
            }}
          >
            删除已阅消息
          </Button>,
        ]}
        pagination={{
          showSizeChanger: true,
        }}
        request={async (params) => {
          return await dispatch({
            type: `${namespace}/queryTable`,
            params,
          });
        }}
        scroll={{ x: 1500 }}
        columns={calcColumns({ operate })}
      />
    </PageContainer>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/submitItem`],
}))(Page);
